<script lang="ts" setup>
import { VbenIcon } from '@vben/icons';

import { Button, Input, Popconfirm } from 'ant-design-vue';

interface TagInputInfo {
  id?: number | string;
  name: string;
}

const emit = defineEmits<{
  (e: 'blur'): void;
  (e: 'change', value: TagInputInfo[]): void;
}>();

const modelValue = defineModel<TagInputInfo[]>({
  default: () => [],
});

function add() {
  modelValue.value.push({ id: null, name: '' });
  onChange();
}

function remove(index: number) {
  modelValue.value.splice(index, 1);
  onChange();
}

function onChange() {
  emit('change', modelValue.value);
}
</script>
<template>
  <div class="flex flex-wrap">
    <div
      v-for="(item, index) in modelValue"
      :key="index"
      class="mb-3 flex w-full items-center gap-2"
    >
      <Input
        placeholder="请输入"
        allow-clear
        v-model:value="item.name"
        show-count
        :maxlength="15"
        @blur="emit('blur')"
        @change="onChange"
      />
      <Popconfirm
        placement="left"
        title="确认删除此标签？"
        @confirm="remove(index)"
      >
        <Button size="small" @click.stop="">
          <template #icon>
            <VbenIcon icon="jam:delete" class="text-red-500" />
          </template>
        </Button>
      </Popconfirm>
    </div>
    <div class="mt-[5px] w-full flex-1 gap-1">
      <Button size="small" @click="add">
        <template #icon>
          <VbenIcon icon="fluent:tag-add-24-regular" />
        </template>
        添加标签
      </Button>
    </div>
  </div>
</template>
